<template>
  <div class="get-box" :class="`${postData.type}`">
    <!-- <input id="file_upload" v-if="postData.type!='get'" name="imageType" type="file" /> -->
    <div class="get-head" @click.stop="upFun">
      <span class="type-btn">{{postData.type}}</span>
      <span>{{postData.type=='get'?'jsonp请求':''}}</span>
    </div>
    <div class="ajax-content get-content">
      <div class="type" v-if="postData.type=='get'">
        <label for>jsonpCallBack定义</label>
        <input type="text" v-model="jsoncallback">
      </div>
      <div class="type">
        <label for>请求地址:</label>
        <textarea name v-model="postData.url" id cols="30" rows="3" placeholder="请求地址"></textarea>
      </div>
      <div class="type">
        <label for>请求头其他参数（非必填）</label>
        <textarea name v-model="postData.headData" id cols="30" rows="3" placeholder="请求地址"></textarea>
      </div>

      <div>
        <div class="flex">
          <label for>请求参数:</label>
          <button class="json_btn" @click.stop="changJson">参数格式化</button>
        </div>
        <textarea name v-model="postData.data" id cols="30" rows="10" placeholder="请求参数json字符串"></textarea>
        <p>格式后数据</p>
        <textarea name v-model="showData.pData" id cols="30" rows="10" placeholder="显示数据"></textarea>
      </div>
      <div>
        <!-- <div class="image_container">
          <img id="preview" :src="shopImg" />
          <input id="file_upload" name="imageType" type="file" />
        </div>-->
        <button @click.stop="cofirmFun">提交</button>
        <span style="font-size:12px;color:red;">点击提交测试实例</span>
      </div>
      <p id="show_p">{ "name": "Brett", "address":"北京路23号", "email": "123456@qq.com" }</p>
      <pre id="out_pre"></pre>
      <pre id="out_pre2"></pre>

      <div style="width:100%;margin-top:15px;">
        <label for>返回结果</label>
        <button class="json_btn" @click.stop="changJsonRes">格式化</button>


        <!-- <textarea name="" id="" v-model="resultData" cols="30" rows="10"></textarea> -->
        <pre id="show" v-if="realData">{{realData}}
          </pre>
            <pre id="show" v-if="showRes">{{showRes.pData}}
          </pre>
      </div>
    </div>
  </div>
</template>

<script>
import { Post, JSONP } from "../common/util.js";
export default {
  props: {
    item: Object
  },
  data() {
    return {
      realData: '',
      jsoncallback: "jsoncallback",
      imageName: "",
      shopImg: "",
      showData:{
        pData:'',
        gData:''
      },
      showRes:{
        pData:''
      },
      headData:''
    };
  },
  mounted() {
    this.imgChang();
    // let postData = this.item.postData;
    // if (postData.type == "get") {
    //   postData.url =
    //     "//vps.beta.ule.com/vpsOnlinePayService/vpsPay/getVillageDecca.do?";
    //   postData.data = "{usrOnlyid:'45qNZ%2FcaHm2gotzf469K8w%3D%3D'}";
    // }
    // let type = this.postData.type;

    // $("." + type + " .ajax-content ").hide();
  },
  methods: {
    changJsonRes(){
      var  realData=this.realData
      if(typeof realData == 'object'){
        return
      }
        if(realData){
     var params = eval("(" + realData + ")");
      this.showRes.pData= JSON.stringify(params, null, 2);
      }
    },
    changJson() {
      let {data}=this.postData
      console.log('data',data)
      if(data){
     var params = eval("(" + data + ")");
      this.showData.pData= JSON.stringify(params, null, 2);
      }
    },
    cofirmFun() {
      console.log("提交");
      // //vps.beta.ule.com/vpsOnlinePayService/vpsPay/getVillageDecca.do?

      let { url, type, data } = this.postData;
      console.log(type)
      if (type == "get") {
        this.getFun();
      } else {
        this.postFun();
      }
    },
    getFun() {
      this.realData = {};
      console.log("get");
      let jsoncallback = this.jsoncallback;
      let { url, type, data,headData } = this.postData;
      var params = "";
      if (!url) return;
      if (data) {
        params = eval("(" + data + ")");
      }
      if (headData) {
        headData = eval("(" + headData + ")");
      }
      JSONP(url, params, jsoncallback,headData)
        .then(res => {
          console.log("res", res);
          this.realData = res;
        })
        .catch(err => {
          console.log("err", err);
          this.realData = { err: err.msg || "请求失败" };
        });
    },
    postFun(imgData) {
      this.realData = {};
      let { url, type, data ,headData} = this.postData;
      //   url = "//vps.beta.ule.com/vpsUzsMobile/yzs/vpsImg/prepVpsImgUpload.do";
      // https://vps.beta.ule.com/vpsLoginService/vpsService/scanQrTrigger!scanQrTrigger.do
      var params = "";
      if (imgData) {
        params = imgData;
      }
      if (data) {
        params = eval("(" + data + ")");
      }
        if (headData) {
        headData = eval("(" + headData + ")");
      }
      if (!url) return;
      console.log("url", url);
      console.log("params", params);
      Post(url, params,headData)
        .then(res => {
          console.log("res", res);
          this.realData = res;
        })
        .catch(err => {
          this.realData = { err: err.msg || "请求失败" };
          console.log("err", err);
        });
    },

    upFun() {
      let type = this.postData.type;
      $("." + type + " .ajax-content ").slideToggle("fast");
    },
    imgChang(e) {
      var _this = this;
      var imgLoad = "";
      var imageName = "";
      $("#file_upload").change(function(e) {
        imageName = e.target.files[0].name;
        var imgData = {
          imageType: "",
          imageName: imageName
        };
        var dom = $("#file_upload")[0];
        // console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
        // console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function(file) {
          return function(e) {
            $("#preview").attr("src", this.result);
            var img = new Image();
            img.src = this.result;
            img.onload = () => {
              var canvas = document.createElement("CANVAS");
              var ctx = canvas.getContext("2d");
              canvas.width = 300;
              canvas.height = 300;
              if (this.result.indexOf("base64") > -1) {
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                imgLoad = canvas.toDataURL("image/png", 0.7).split(",")[1];
              }
              imgData.imageType = imgLoad;
              imgData.imageName = imageName;
              console.log("imgData", imgData);
              _this.postFun(imgData);
            };
          };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
        _this.imageName = imageName;
      });
    }
  },
  computed: {
    postData() {
      return this.item.postData;
    }
  }
};
</script>

<style scoped>
.json_btn {
  padding: 5px 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.get-box {
  background-color: #eff7ff;
  border: 1px solid #61affe;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 10px;
  text-align: left;
  margin-bottom: 10px;
}
.get {
  border: 1px solid #61affe;
  background-color: #eff7ff;
}
.post {
  border: 1px solid #49cc90;
  background-color: #ecfaf4;
}

.get-head {
  height: 50px;
  line-height: 50px;
}
.get .get-head {
  background-color: #eff7ff;
}
.post .get-head {
  background-color: #ecfaf4;
}
.type-btn {
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  padding: 5px 20px;
}
.get .type-btn {
  background-color: #61affe;
}
.post .type-btn {
  background-color: #49cc90;
}

.content {
  margin: 0 auto;
  max-width: 750px;
  width: 100%;
  text-align: left;
}

button {
  padding: 10px 50px;
  background: #fff;
  border: 1px solid #666;
  border-radius: 5px;
  box-shadow: 0 0 5px #333;
  margin: 10px 0;
}

textarea,
input {
  width: 100%;
}

label {
  display: inline-block;
  margin-bottom: 8px;
}

.type {
  margin-bottom: 15px;
}

#show {
  text-align: left;
  border: 1px solid #ccc;
  text-indent: 2px;
  margin-bottom: 20px;
  word-break: break-all;
  white-space: pre-wrap;
  word-break: break-all;
  text-overflow: ellipsis;
}
.get .get-content {
  border-top: 1px solid #61affe;
}
.post .get-content {
  border-top: 1px solid #49cc90;
}

.get-content textarea,
.get-content input {
  background-color: #eff7ff;
  padding: 5px;
  border: 1px solid #ccc;
  word-break: break-all;
}
.post .get-content textarea,
.post .get-content input {
  background-color: #ecfaf4;
  word-break: break-all;
}
.content {
  padding: 10px;
}
</style>

